<template>
  <div class="fold-data">
    <div class="fold-data-search">
      <el-input
        v-model="filterText"
        placeholder="请输入查询图层"
        class="input-with-select"
      >
        <template #append>
          <el-button icon="el-icon-search"></el-button>
        </template>
      </el-input>
    </div>
    <div class="fold-data-list">
      <el-tree
        ref="treeRef"
        v-if="
          router.getters['menu/currentMenu'] == '2' ||
          router.getters['menu/currentMenu'] == '3'
        "
        :data="
          router.getters['menu/currentMenu'] == '2' ? basicData : specialData
        "
        :props="defaultProps"
        node-key="id"
        :default-expanded-keys="
          router.getters['menu/currentMenu'] == '2'
            ? defaultExpandData_Basic
            : defaultExpandData_Special
        "
        :filter-node-method="filterNode"
      >
        <template #default="{ node, data }">
          <div class="custom-tree-node">
            <div>{{ node.label }}</div>
            <div class="custom-options" v-if="data.type == 1">
              <el-switch
                v-model="data.open"
                @click="handleNodeClick(node, data)"
              />

              <el-popover placement="right" :width="50" trigger="hover">
                <template #reference>
                  <el-icon class="custom-options-more">
                    <more-filled />
                  </el-icon>
                </template>
                <div>
                  <div>
                    <el-button
                      size="mini"
                      type="text"
                      @click="collectionClick(data)"
                    >
                      <el-icon>
                        <star />
                      </el-icon>
                      收藏
                    </el-button>
                  </div>
                  <div>
                    <el-button
                      size="mini"
                      type="text"
                      @click="handleLegendClick(data)"
                    >
                      <i class="el-icon-picture-outline-round"></i>
                      图例</el-button
                    >
                  </div>
                  <div>
                    <el-button
                      size="mini"
                      type="text"
                      @click="handleFullClick(data)"
                    >
                      <i class="el-icon-picture-outline"></i> 全图
                    </el-button>
                  </div>
                  <div>
                    <el-button
                      size="mini"
                      type="text"
                      @click="handleOpacityClick(data)"
                      ><i class="el-icon-view"></i> 透明度</el-button
                    >
                  </div>
                </div>
              </el-popover>
            </div>
          </div>
        </template>
      </el-tree>

      <el-tree
        ref="treeRef1"
        v-if="
          router.getters['menu/currentMenu'] == '4' ||
          router.getters['menu/currentMenu'] == '5'
        "
        :data="
          router.getters['menu/currentMenu'] == '4'
            ? selectedLayerList
            : collectLayerList
        "
        :props="defaultProps"
        :filter-node-method="filterNode"
      >
        <template #default="{ node, data }">
          <div class="custom-tree-node">
            <div>{{ node.label }}</div>
            <div class="custom-options">
              <el-switch
                v-model="data.open"
                @click="handleNodeClick(node, data)"
              />

              <el-popover placement="right" :width="50" trigger="hover">
                <template #reference>
                  <el-icon class="custom-options-more">
                    <more-filled />
                  </el-icon>
                </template>
                <div>
                  <div>
                    <el-button
                      size="mini"
                      type="text"
                      @click="collectionClick(data)"
                    >
                      <el-icon>
                        <StarFilled
                          v-if="router.getters['menu/currentMenu'] == '5'" />
                        <star v-else
                      /></el-icon>
                      {{
                        router.getters["menu/currentMenu"] == "5"
                          ? "取消收藏"
                          : "收藏"
                      }}</el-button
                    >
                  </div>
                  <div>
                    <el-button
                      size="mini"
                      type="text"
                      @click="handleLegendClick(data)"
                    >
                      <i class="el-icon-picture-outline-round"></i>
                      图例</el-button
                    >
                  </div>
                  <div>
                    <el-button
                      size="mini"
                      type="text"
                      @click="handleFullClick(data)"
                    >
                      <i class="el-icon-picture-outline"></i> 全图
                    </el-button>
                  </div>
                  <div>
                    <el-button
                      size="mini"
                      type="text"
                      @click="handleOpacityClick(data)"
                      ><i class="el-icon-view"></i> 透明度</el-button
                    >
                  </div>
                </div>
              </el-popover>
            </div>
          </div>
        </template>
      </el-tree>

      <el-dialog v-model="showTransPop" title="透明度" append-to-body>
        <el-slider
          v-model="opacity"
          :max="1"
          :step="0.1"
          @input="handleOpacityChange(opacity)"
        >
        </el-slider>
      </el-dialog>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  onMounted,
  computed,
  watch,
  getCurrentInstance,
} from "vue";
import axios from "../../../utils/http";
import {
  MoreFilled,
  Star,
  StarFilled,
  Picture,
  Orange,
  View,
  CopyDocument,
} from "@element-plus/icons";
import { useStore } from "vuex";

import Bus from "../func/Bus";
import { operateFeatureLayerList } from "../func";
import { getCollectionList } from "../func/collection";

export default defineComponent({
  setup(props, ctx) {
    const router = useStore();
    // 标准图层树
    let basicData: any = ref([]);
    // 专题图层树
    let specialData: any = ref([]);
    let defaultExpandData_Basic: any = ref([]);
    let defaultExpandData_Special: any = ref([]);

    // 已选图层
    let selectedLayerList = computed(() => {
      return router.state.layers.layerList;
    });
    // 收藏图层
    let collectLayerList: any = computed(() => {
      return router.getters["layers/getCollectLayerList"];
      // return router.state.layers.collectLayerList;
    });

    let defaultProps = ref({
      serviceType: "serviceType",
      children: "children",
      label: "name",
      type: "type",
      url: "id",
    });

    let showTransPop = ref(false);
    let opacity = ref(0);

    const filterText = ref("");
    const instance: any = getCurrentInstance();
    watch(
      () => filterText.value,
      (newVal: string, oldVal: string) => {
        // console.log("instance,", instance);
        // console.log("newVal,", newVal);
        let currMenu = router.getters["menu/currentMenu"];
        if (currMenu == "2" || currMenu == "3") {
          instance.refs.treeRef.filter(newVal);
        } else {
          instance.refs.treeRef1.filter(newVal);
        }
      }
    );

    const filterNode = (value: string, data: any) => {
      // console.log(value, data);
      if (!value) return true;
      else return data.name.indexOf(value) !== -1;
    };
    // 当前透明度的id
    let opacityTempId = ref("");
    let opacityTemp = Array();

    const handleOpacityClick = (data: any) => {
      showTransPop.value = true;
      if (opacityTemp.find((o) => o.id == data.id)) {
        opacityTempId.value = data.id;
        opacity.value = opacityTemp.find((o) => o.id == data.id).opacity;
      } else {
        opacityTemp.push({ id: data.id, opacity: 1 });
        opacityTempId.value = data.id;
        opacity.value = 1;
      }
    };
    const handleNodeClick = (node: any, data: any) => {
      console.log(data,'data123')
      const addOrRemoveLayer = {
        open: data.open,
        serviceUrl: data.serviceUrl,
        id: data.id,
        name: data.name,
        serviceType: data.serviceType,
        type: "addOrRemoveLayer",
      };
      if (data.open) {
        //添加到已选图层中
        router.dispatch("layers/ADD_LAYER", addOrRemoveLayer);
      } else {
        //从已选图层中移除
        router.dispatch("layers/REMOVE_LAYER", addOrRemoveLayer);
      }

      Bus.$emit("map-handle", addOrRemoveLayer);
    };
    const updateTreeData = (item: any, id: string, open: boolean) => {
      item.forEach((child: any) => {
        if (child.children.length > 0) {
          updateTreeData(child.children, id, open);
        } else {
          if (child.id === id) {
            child.open = open;
          }
        }
      });
    };
    const handleOpacityChange = (data: any) => {
      opacityTemp.find((op) => op.id == opacityTempId.value).opacity = data;
      const opacityChange = {
        id: opacityTempId.value,
        opacity: data,
        type: "opacityChange",
      };
      Bus.$emit("map-handle", opacityChange);
    };
    const handleLegendClick = (data: any) => {
      const legendLayerAdd = {
        id: data.id,
        url: data.serviceUrl,
        name: data.name,
        type: "legendLayerAdd",
      };

      Bus.$emit("map-handle", legendLayerAdd);
    };
    const collectionClick = (data: any) => {
      let currMenu = router.getters["menu/currentMenu"];
      const collectionLayer = {
        id: currMenu == "5" ? data.Id : data.id,
        opt: currMenu == "5" ? "delete" : "add",
        userId: router.state.user.userInfo.id,
        type: "collectionLayer",
      };
      Bus.$emit("map-handle", collectionLayer);
    };
    const handleFullClick = (data: any) => {
      const fullAllLayer = { id: data.id, type: "fullAllLayer" };
      Bus.$emit("map-handle", fullAllLayer);
    };

    onMounted(() => {
      // 标准图层树
      axios
        .get(
          "/Map/Map_resourceDirectory/appGetNodetree?pid=22222222-0000-0000-0000-000000000000"
        )
        .then((res) => {
          if (res.data.code == 0) {
            basicData.value = res.data.data;
            defaultExpandData_Basic.value.push(basicData.value[0].id);
          }
        })
        .catch((err) => {
          console.log(err);
        });

      // 专题图层树
      axios
        .get(
          "/Map/Map_resourceDirectory/appGetNodetree?pid=11111111-0000-0000-0000-000000000000"
        )
        .then((res) => {
          if (res.data.code == 0) {
            specialData.value = res.data.data;
            defaultExpandData_Special.value.push(specialData.value[0].id);
          }
        })
        .catch((err) => {
          console.log(err);
        });
      // 收藏图层
      getCollectionList(router.state.user.userInfo.id);
    });

    return {
      router,
      filterText,
      basicData,
      specialData,
      selectedLayerList,
      collectLayerList,
      defaultProps,
      opacity,
      showTransPop,
      collectionClick,
      handleNodeClick,
      handleLegendClick,
      handleOpacityClick,
      handleFullClick,
      handleOpacityChange,
      operateFeatureLayerList,
      defaultExpandData_Basic,
      defaultExpandData_Special,
      filterNode,
    };
  },
  components: {
    MoreFilled,
    Star,
    Orange,
    View,
    Picture,
    CopyDocument,
    StarFilled,
  },
});
</script>

<style lang="less" scoped>
.fold-data {
  padding: 0 10px;
  height: 98%;
  // border: blue 1px solid;
}
.fold-data-search {
  margin-top: 10px;
}
.fold-data-list {
  margin-top: 10px;
  height: 94%;
  overflow-y: auto;
}

.el-tree {
  :deep(.el-icon-caret-right) {
    color: #0179cb;
  }

  :deep(.el-tree-node__expand-icon.is-leaf) {
    // color: transparent;
  }

  :deep(.el-tree-node__expand-icon.is-leaf:before) {
    content: "\e718";
    font-size: 18px;
    // color: transparent;
  }

  :deep(.el-icon-caret-right:before) {
    // 未展开
    content: "\e78a";
    font-size: 18px;
    // color: #0179cb;
  }
  :deep(.expanded:before) {
    // 展开
    content: "\e784";
    font-size: 18px;
    // color: #0179cb;
  }
  :deep(.expanded) {
    // 展开不旋转
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  .is-leaf + .custom-tree-node {
    width: 100%;
    position: relative;

    .custom-options {
      position: absolute;
      right: 0;
      top: 0;
      display: flex;
      align-items: center;
      z-index: 1;
    }

    .custom-options-more {
      transform: rotate(90deg);
      margin-left: 10px;
    }
  }

  .option-more-item {
    margin-bottom: 10px;
  }
}
</style>
<style>
.el-popover.el-popper {
  min-width: 80px !important;
}
</style>
